<template>
<div class='chart-view'>
  <div class='score'>
    评价问卷得分：{{score}}分
  </div>
  <div class='chart-item' v-for='(value,key,index) in chartData' :key='index'>
    <div v-if='!(value[0].type === "评分")'>
      <h1 style='font-weight: 400;color:#666;' v-if='key'>题号 <strong>{{index+1}}</strong></h1>
      <div class='title' v-if='value'>--{{key}}</div>
      <div class='default-chart' :id="`chart${index}`" v-if='value'></div>
      <chart-select :value='value' :index='index'></chart-select>
    </div>
    <div  v-if='value[0].type === "评分"'>
      <h1 style='font-weight: 400;color:#666;' v-if='key'>题号 <strong>{{index+1}}</strong></h1>
      <div class='title' v-if='value'>--{{key}}</div>
      <div class='score'>
        {{score}}分
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import ChartSelect from '@/views/project/form/statistics/ChartSelect'
  import { Chart } from '@antv/g2'
  export default {
    name: 'DataCharts',
    components: { ChartSelect },
    props: ['chartData'],
    data() {
      return {
        score: '0',
        isScore: false
      }
    },
    created () {
      console.log(this.chartData)
    },
    beforeMount () {
      Object.keys(this.chartData).forEach(key => {
        if(this.chartData[key][0].type === "评分") {
          this.score = this.chartData[key][0].value
          this.isScore = true
          console.log(this.score)
        }
      })
    },
    mounted() {
      this.initCharts()
    },
    methods: {
      initCharts() {
        console.log('----------------',this.chartData)
        Object.keys(this.chartData).forEach((key,index) => {
          if(typeof this.chartData[key][0] == "number") {
            return
          }
          //判断是否为选择题
            const flag = this.chartData[key][0].type !== null
            const chart = new Chart({
              container: `chart${index}`,
              autoFit: true,
              height: 200
            });
            chart.data(this.chartData[key]);
            chart.scale({
              value: {
                max: 30,
                min: 0,
                alias: '统计人数'
              }
            });
            if (flag) {
              chart.axis('type', {
                title: null,
                tickLine: null,
                line: null
              });

              chart.axis('value', {
                label: null,
                title: {
                  offset: 30,
                  style: {
                    fontSize: 12,
                    fontWeight: 300
                  }
                }
              });
              chart.legend(false);
              chart.coordinate().transpose();
              chart
                .interval()
                .position('type*value')
                .color('value','#EB9F9F')
                .size(26)
                .label('value', {
                  style: {
                    fill: '#8d8d8d'
                  },
                  offset: 10
                });
            } else {
              chart.axis('varchar', {
                title: null,
                tickLine: null,
                line: null
              });

              chart.axis('value', {
                label: null,
                title: {
                  offset: 30,
                  style: {
                    fontSize: 12,
                    fontWeight: 300
                  }
                }
              });
              chart.legend(false);
              chart.coordinate().transpose();
              chart
                .interval()
                .position('varchar*value')
                .color('value','#EB9F9F')
                .size(26)
                .label('value', {
                  style: {
                    fill: '#8d8d8d'
                  },
                  offset: 10
                });
            }


            chart.interaction('element-active');
            chart.render();

        })
      }
    }

  }
</script>

<style lang="less" scoped>
@import "src/assets/css/themeColor";
  *{
    box-sizing: border-box;
  }
.score {
  margin-top: 40px;
  margin-left: -20px;
  text-align: center;
  font-size: 50px;
  color: #eaa3a3;
}
.chart-item{
  padding:15px;
  min-height: 225px;
  border: #ddd 1px dashed;
  border-top: none;
  text-align: left;
  h1{
    display: inline-block;
    float: left;
    margin-bottom: 10px;
  }

}
  .title{
    margin-top: 5px;
    text-indent: 1em;
    color: @theme_gray;
 }
.chart-view:first-child{
  border-top: #ddd 1px dashed;
}
.default-chart{
  margin:20px auto;
  width:80%;
}
</style>
